<template>
   <view class="login-container">
      <view class="logo">
         <image src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/logo_icon.png"></image>
      </view>
      <view class="login">

         <!-- #ifndef MP-WEIXIN -->
         <!-- 网页端表单登录 -->
         <uni-forms :model="formData" :rules="formRules" ref="formRef" err-show-type="toast">
            <uni-forms-item name="account">
               <input class="input" type="text" placeholder="请输入手机号" v-model="formData.account" />
            </uni-forms-item>
            <uni-forms-item name="password">
               <input class="input" type="text" password placeholder="请输入密码" v-model="formData.password" />
            </uni-forms-item>
            <uni-forms-item>
               <button class="button phone" @tap="passwordLogin" :loading="loading">登录</button>
            </uni-forms-item>
         </uni-forms>
         <!-- #endif -->

         <!-- #ifdef MP-WEIXIN -->
         <!-- 小程序端授权登录 -->
         <button class="button phone" open-type="getPhoneNumber" @getphonenumber="handleGetPhoneNumber">
            <text class="icon icon-phone"></text>
            <text>手机号快捷登录</text>
         </button>
         <!-- #endif -->

         <!-- 通用模拟登录 -->
         <view class="extra">
            <view class="caption">
               <text>其他登录方式</text>
            </view>
            <view class="options">
               <text class="icon icon-phone" @tap="simulateLogin">快捷登录</text>
            </view>
         </view>
         <view class="tips">登录/注册即视为你同意《服务条款》和《小兔鲜儿隐私协议》</view>
      </view>
   </view>
</template>

<script setup lang="ts">
import useLoginStore from "@/pinia/modules/loginStore";
import { reactive, ref } from "vue";
import type { Ref } from "vue";
import type { PwdLoginDTO } from "@/types/loginType";
import { formRules } from "@/constants/rules";

const loginStore = useLoginStore();

// 用户名+密码登录
const loading: Ref<boolean> = ref<boolean>(false);
const formRef = ref();
const formData = reactive<PwdLoginDTO>({
   account: "13123456789",
   password: "123456",
});
const passwordLogin = async () => {
   const validate = await formRef.value.validate().catch((error: any) => error);
   if (validate instanceof Array) {
      return;
   }
   try {
      loading.value = true;
      await loginStore.login("passwordLogin", formData);
      await uni.showToast({ title: "登录成功", icon: "success" });
      uni.switchTab({ url: "/pages/user/user" });

   } catch (error: any) {
      await uni.showToast({ title: error.message, icon: "error" });
   } finally {
      loading.value = false;
   }
};

//微信登录
const handleGetPhoneNumber: UniHelper.ButtonOnGetphonenumber = async (event) => {
   try {
      const { code } = await uni.login();
      const { encryptedData, iv } = await uni.getUserInfo();
      const data={ code, encryptedData, iv }
      await loginStore.login("wxLogin", data);
      uni.showToast({ title: "登录成功", icon: "success", duration: 2000 });
      uni.switchTab({ url: "/pages/user/user" });
   } catch (error: any) {
      await uni.showToast({ title: error.message, icon: "error", duration: 2000 });
   }
};


// 快捷登录
const simulateLogin = async () => {
   try {
      await loginStore.login("simulateWxLogin", { phoneNumber: "13237429584" });
      await uni.showToast({ title: "登录成功", icon: "success" });
      uni.switchTab({ url: "/pages/user/user" });
   } catch (error: any) {
      await uni.showToast({ title: error.message, icon: "error" });

   }
};
</script>


<style scoped lang="scss">
page {
   height: 100%;
}


.login-container {
   display: flex;
   flex-direction: column;
   height: 100%;
   padding: 20rpx 40rpx;

   .logo {
      flex: 1;
      text-align: center;

      image {
         width: 220rpx;
         height: 220rpx;
         margin-top: 10vh;
      }
   }

   .login {
      display: flex;
      flex-direction: column;
      height: 60vh;
      padding: 40rpx 20rpx 20rpx;

      .input {
         width: 100%;
         height: 80rpx;
         font-size: 28rpx;
         border-radius: 72rpx;
         border: 1px solid #ddd;
         padding-left: 30rpx;
         margin-bottom: 20rpx;
      }

      .button {
         display: flex;
         align-items: center;
         justify-content: center;
         width: 100%;
         height: 80rpx;
         font-size: 28rpx;
         border-radius: 72rpx;
         color: #fff;

         .icon {
            font-size: 40rpx;
            margin-right: 6rpx;
         }
      }

      .phone {
         background-color: #28bb9c;
      }

      .wechat {
         background-color: #06c05f;
      }

      .extra {
         flex: 1;
         padding: 20rpx 70rpx 0;

         .caption {
            width: 440rpx;
            line-height: 1;
            border-top: 1rpx solid #ddd;
            font-size: 26rpx;
            color: #999;
            position: relative;

            text {
               transform: translate(-40%);
               background-color: #fff;
               position: absolute;
               top: -12rpx;
               left: 50%;
            }
         }

         .options {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 70rpx;

            button {
               padding: 0;
               background-color: transparent;
            }
         }

         .icon {
            font-size: 24rpx;
            color: #444;
            display: flex;
            flex-direction: column;
            align-items: center;

            &::before {
               display: flex;
               align-items: center;
               justify-content: center;
               width: 80rpx;
               height: 80rpx;
               margin-bottom: 6rpx;
               font-size: 40rpx;
               border: 1rpx solid #444;
               border-radius: 50%;
            }
         }

         .icon-weixin::before {
            border-color: #06c05f;
            color: #06c05f;
         }
      }
   }

   .tips {
      position: absolute;
      bottom: 80rpx;
      left: 20rpx;
      right: 20rpx;
      font-size: 22rpx;
      color: #999;
      text-align: center;
   }
}

</style>
